<template>
  <a-form class="w-3/4" ref="form" size="large" autocomplete="off">
    <a-form-item v-bind="validateInfos.phone">
      <a-input v-model:value="formRef.phone" placeholder="手机号"></a-input>
    </a-form-item>

    <a-form-item v-bind="validateInfos.verifyCode">
      <a-input-group compact>
        <a-input
          style="width: 50%"
          placeholder="验证码"
          v-model:value="formRef.verifyCode"
        ></a-input>
        <a-button disabled v-if="isSending" class="w-1/2">
          重新获取({{ timeRef }})
        </a-button>
        <a-button type="primary" v-else @click="sendSms" class="w-1/2">
          获取验证码
        </a-button>
      </a-input-group>
    </a-form-item>

    <a-form-item v-bind="validateInfos.password">
      <a-input-password
        placeholder="密码"
        v-model:value="formRef.password"
        autocomplete="new-password"
      ></a-input-password>
    </a-form-item>

    <a-form-item v-bind="validateInfos.passwordConfirm">
      <a-input-password
        placeholder="确认密码"
        v-model:value="formRef.passwordConfirm"
      ></a-input-password>
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 0 }">
      <a-button type="primary" w-full @click="reset">重置密码</a-button>
    </a-form-item>

    <div text-center>
      已有帐号？
      <a @click="emits('changeType', 'LoginForm')">立即登录</a>
    </div>
  </a-form>
</template>

<script setup lang="ts">
import { updatePwd } from '@/api/common';
import { Form } from 'ant-design-vue';
import md5 from 'md5';

const emits = defineEmits(['changeType']);

const formRef = reactive({
  password: '',
  phone: '',
  verifyCode: '',
  passwordConfirm: '',
});

const rulesRef = reactive({
  phone: [
    {
      validator: (_rule, value) => {
        if (!value) return Promise.reject('请输入手机号');
        if (!/^1[3456789]\d{9}$/.test(value)) {
          return Promise.reject('请输入正确的手机号');
        } else {
          return Promise.resolve();
        }
      },
    },
  ],
  verifyCode: [{ required: true, message: '请输入验证码' }],
  password: [
    {
      validator: (_rule, value) => {
        return new Promise((resolve, reject) => {
          if (!value || value.length < 6 || value.length > 32) {
            reject('最短6位，最长32位，支持英文字母、数字以及特殊符号');
          } else {
            resolve(value);
          }
        });
      },
    },
  ],
  passwordConfirm: [
    {
      validator: (_rule, value) => {
        if (value != formRef.password) {
          return Promise.reject('两次密码输入不一致');
        } else {
          return Promise.resolve();
        }
      },
    },
  ],
});

const { validate, validateInfos } = Form.useForm(formRef, rulesRef);

const { isSending, timeRef, send } = useSms();
const sendSms = () => {
  validate(['phone']).then(() => {
    send({
      phone: formRef.phone,
      smsType: 'ForgetPwd',
    });
  });
};

const reset = () => {
  validate().then(async () => {
    const { password, phone, verifyCode } = formRef;
    const res = await updatePwd({
      password: md5(password),
      phone,
      verifyCode,
    });
    if (res.code == 'ok') {
      message.success('重置成功');
      emits('changeType', 'LoginForm');
    } else {
      // message.error(res.message);
    }
  });
};
</script>
